<template>
  <div class="me">
    <myheader></myheader>
    <!-- <div class="tec">{{actoken}}</div> -->
    <div class="me-info">
      <div class="info-img">
        <img src="" alt="">
      </div>
      <div class="info-base">
        <div class="base-name">xxx</div>
        <div class="base-tel">1322222222</div>
      </div>
    </div>
    <div class="me-list" >
      <div class="list-item" v-for='(item,index) in meList' :key='index'
        @click="jumpToItem(item.path)"
      >
        {{item.title}}
      </div>
    </div>
    <!-- <router-view></router-view> -->
    <tabbar
      @click="getTabbarFn"
      ref='tabbar'
    >
    </tabbar>
  </div>
</template>
<script>
import {mapActions,mapState,mapMutations} from 'vuex'
import tabbar from '../components/tabbar'
import myheader from '../components/header'

  export default {
    data () {
      return {
        myAnum: this.$store.state.moduleA.Anum,
        meList: [
          {title: '我的记录', path: '/me/meRecord'},
          {title: '我的收藏', path: '/me/meCollent'}
        ]
      }
    },
    components: {
      tabbar,
      myheader
    },
    methods: {
      // 直接触发子组件的事件
      getTabbarFn() {
        this.$refs.tabbar.jumpRouter()
      },
      ...mapActions([
        'changeAcNum',
        'getMyToken',
        'getGoods'
      ]),
      ...mapActions('moduleA', [
        'incrementIfOddOnRootSum'
      ]),
      ...mapMutations('moduleA', [
        'changAnum'
      ]),
      DoMutationFn() {
        this.$store.commit('moduleA/changAnum', 'bbb')
      },
      jumpToItem(path) {
        this.$router.push({path})
      }
    },
    computed: {
      ...mapState([
        'actoken'
      ]),
      ...mapState('moduleA', [
        'Anum'
      ])
    },
    created () {
      // this.changeAcNum()
      this.getGoods()
      console.log(this.myAnum, '$store');
      console.log(this.Anum, 'map');
      this.DoMutationFn()
      this.changAnum()
      this.incrementIfOddOnRootSum()
    }
  }
</script>
<style lang="scss" scoped>
.me {
  font-size: 16px;
  position: relative;
  text-overflow: ellipsis;
  flex-wrap: nowrap;
  overflow: hidden;
  .tec{

  }
  .me-info{
    display: flex;
    height: 80px;
    .info-img{
      width: 80px;
      position: relative;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -20px;
        margin-left: -20px;
      }
    }
    .info-base{
      padding: 10px 10px;
      .base-name{
        margin-bottom: 20px;
      }
    }
  }
  .me-list{
    padding: 0 20px;
    .list-item{
      text-align: left;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
